:root {
    --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
        "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei",
        "Source Han Sans CN", sans-serif;
}

.main-container {
    overflow: hidden;
}

.main-container,
.main-container * {
    box-sizing: border-box;
}

input,
select,
textarea,
button {
    outline: 0;
}

.main-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    position: relative;
    width: 430px;
    height: 932px;
    margin: 0 auto;
    padding: 10px 10px 10px 10px;
    background: #ffffff;
    overflow: hidden;
}
.section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-shrink: 0;
    position: relative;
    width: 430px;
    padding: 16px 32px 16px 52px;
	z-index: 1000px;
}
.text {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 37px;
    height: 22px;
    color: #33363f;
    font-family: SF Pro Text, var(--default-font-family);
    font-size: 17px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    white-space: nowrap;
    z-index: 1000;
}
.section-2 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 8px;
    position: relative;
    width: 79.67px;
    z-index: 1000;
}
.img {
    flex-shrink: 0;
    position: relative;
    width: 19.2px;
    height: 12.227px;
    background: url(./assets/images/bb735e9e-7395-443c-973d-821ade5d44f2.png)
        no-repeat center;
    background-size: cover;
    z-index: 3;
}
.pic {
    flex-shrink: 0;
    position: relative;
    width: 17.142px;
    height: 12.328px;
    background: url(./assets/images/e736f837-92d2-4260-be59-27e68b2e90ca.png)
        no-repeat center;
    background-size: cover;
    z-index: 4;
}
.img-2 {
    flex-shrink: 0;
    position: relative;
    width: 27.328px;
    height: 13px;
    background: url(./assets/images/99b2a804-5dcc-4dbe-b4f9-de0e0e92226d.png)
        no-repeat center;
    background-size: cover;
    z-index: 5;
}

.img-3 {
    flex-shrink: 0;
    position: absolute;
    width: 187px;
    height: 187px;
    top: 50%;
    left: 50%;
    background: url(./assets/images/cbcad73a-849b-43e1-9a0f-a9c0310da3f2.png) no-repeat center;
    background-size: cover;
    transform: translate(-50%, -50%); /* Center the element */
    z-index: 1000;

    /* Animation for rotation */
    animation: rotateAnimation 3s linear ;
}

/* Define the rotation animation */
@keyframes rotateAnimation {
    from {
        transform: translate(-50%, -50%) rotate(0deg); /* Start rotation */
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg); /* Complete rotation */
    }
}

/* Styling the new container */
.orange-background {
    position: absolute;
     top: calc(50% + 60px); /* Position below the orange background */
     left: 50%;
    width: 50px; /* Initial size */
    height: 50px; /* Initial size */
   transform:  translate(-50%,-50%) scale(0); /* Start from the center, scaled down */
	 transform-origin: center; /* Ensures scaling happens from the center */
    z-index: 10;
    animation: scaleUp 3s ease-in-out forwards; /* Scale up animation */
	animation-delay: 3s;
}

/* Animation to scale up */
@keyframes scaleUp {
    to {
        transform: translate(-50%, -50%) scale(50); /* Scale to fill the screen */
    
      
    }
}

    /* Styling for the confirmation text */
        #confirmation-text {
            opacity: 0;
			z-index: 1000;
			 position: absolute; /* Absolute positioning for precise centering */
            top: 60%; /* Vertically centered */
			 transform: translate(-50%, 0);
            left: 53%; /* Horizontally centered */
            animation: fadeIn 2s ease-in-out forwards; /* Animation defined */
            animation-delay: 4s; /* Delay before the animation starts */
        }

        /* Keyframes for fade-in effect */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }